<template>
  <div class="app-container">
    <el-form :model="queryParams"
             ref="queryForm"
             size="small"
             :inline="true"
             v-show="showSearch"
             label-width="68px">
      <el-form-item label="发货人名字"
                    prop="senderName">
        <el-input v-model="queryParams.senderName"
                  placeholder="请输入发货人名字"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="收货人名字"
                    prop="receiverName">
        <el-input v-model="queryParams.receiverName"
                  placeholder="请输入收货人名字"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="运单编号"
                    prop="waybillNumber">
        <el-input v-model="queryParams.waybillNumber"
                  placeholder="请输入运单编号"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="预计发货时间"
                    prop="deliveryTime">
<!--        <el-date-picker clearable-->
<!--                        v-model="queryParams.deliveryTime"-->
<!--                        type="date"-->
<!--                        value-format="yyyy-MM-dd"-->
<!--                        placeholder="请选择预计发货时间">-->
<!--        </el-date-picker>-->
        <el-date-picker
          v-model="timeRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          value-format="timestamp">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="货运单状态"
                    prop="waybillStatus">
        <el-select v-model="queryParams.waybillStatus"
                   placeholder="请选择货运单状态"
                   clearable>
          <el-option v-for="dict in dict.type.accept_waybill_status"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-search"
                   size="mini"
                   @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"
                   size="mini"
                   @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10"
            class="mb8">
      <el-col :span="1.5">
        <el-button type="primary"
                   plain
                   icon="el-icon-plus"
                   size="mini"
                   @click="handleAdd"
                   v-hasPermi="['accept:waybill:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success"
                   plain
                   icon="el-icon-edit"
                   size="mini"
                   :disabled="single"
                   @click="handleUpdate"
                   v-hasPermi="['accept:waybill:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger"
                   plain
                   icon="el-icon-delete"
                   size="mini"
                   :disabled="multiple"
                   @click="handleDelete"
                   v-hasPermi="['accept:waybill:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning"
                   plain
                   icon="el-icon-download"
                   size="mini"
                   @click="handleExport"
                   v-hasPermi="['accept:waybill:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch"
                     @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading"
              :data="waybillList"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55"
                       align="center" />
      <el-table-column label="运单编号"
                       align="center"
                       prop="waybillNumber" />
      <el-table-column label="发货人名字"
                       align="center"
                       prop="senderName" />
      <el-table-column label="发货人手机"
                       align="center"
                       prop="senderMobile" />
      <el-table-column label="发货人地址"
                       align="center"
                       prop="senderAddr" />
      <el-table-column label="收货人名字"
                       align="center"
                       prop="receiverName" />
      <el-table-column label="收货人手机"
                       align="center"
                       prop="receiverMobile" />
      <el-table-column label="收货人地址"
                       align="center"
                       prop="receiverAddr" />
      <el-table-column label="预计发货时间"
                       align="center"
                       prop="deliveryTime"
                       width="180">
        <template slot-scope="scope">
          <!-- <span>{{ parseTime(scope.row.deliveryTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span> -->
          <span>{{scope.row.deliveryTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="代收货款"
                       align="center"
                       prop="isNeedCollectPayment">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.accept_collect_payment_yes_no"
                    :value="scope.row.isNeedCollectPayment" />
        </template>
      </el-table-column>
      <el-table-column label="返款类型"
                       align="center"
                       prop="refundType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.accept_refund_type"
                    :value="scope.row.refundType" />
        </template>
      </el-table-column>
      <el-table-column label="支付方式"
                       align="center"
                       prop="payType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.accept_pay_type"
                    :value="scope.row.payType" />
        </template>
      </el-table-column>
      <el-table-column label="搬运服务"
                       align="center"
                       prop="isNeedMovingService">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.accept_moving_service_yes_no"
                    :value="scope.row.isNeedMovingService" />
        </template>
      </el-table-column>
      <el-table-column label="减费(元)"
                       align="center"
                       prop="reduceFund" />
      <el-table-column label="货物重量(kg)"
                       align="center"
                       prop="goodsWeight" >
        <template slot-scope="scope">
          <label>{{scope.row.goodsWeight/1000}}</label>
        </template>
      </el-table-column>
      <el-table-column label="货物体积(m³)"
                       align="center"
                       prop="goodsVolume" >
        <template slot-scope="scope">
          <label>{{scope.row.goodsVolume/1000}}</label>
        </template>
      </el-table-column>
      <el-table-column label="是否包含易碎品"
                       align="center"
                       prop="containsFragileGoods">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.accept_contains_fragile_goods_yes_no"
                    :value="scope.row.containsFragileGoods" />
        </template>
      </el-table-column>
      <el-table-column label="货物价值(元)"
                       align="center"
                       prop="goodsValue" >
        <template slot-scope="scope">
           <label>{{scope.row.goodsValue/100}}</label>
        </template>
      </el-table-column>
      <el-table-column label="货运单状态"
                       align="center"
                       prop="waybillStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.accept_waybill_status"
                    :value="scope.row.waybillStatus" />
        </template>
      </el-table-column>
      <el-table-column label="备注信息"
                       align="center"
                       prop="remarks" />
      <el-table-column label="操作"
                       align="center"
                       class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="text"
                     icon="el-icon-s-order"
                     @click="showWaybillDetail(scope.row)">详情</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-edit"
                     @click="handleUpdate(scope.row)"
                     v-hasPermi="['accept:waybill:edit']">修改</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-delete"
                     @click="handleDelete(scope.row)"
                     v-hasPermi="['accept:waybill:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 运单详情 -->
    <el-dialog :title="title"
               :visible.sync="descriptionsShow"
               width="1000px"
               append-to-body>
      <el-descriptions
                       :column="3"
                       border
                       v-if="descriptionsShow">
        <el-descriptions-item label="运单编号"
                              span="3">{{this.waybillDetail.num}}</el-descriptions-item>
        <el-descriptions-item label="发货人名字">{{this.waybillDetail.senderName}}</el-descriptions-item>
        <el-descriptions-item label="发货人电话">{{this.waybillDetail.senderMobile}}</el-descriptions-item>
        <el-descriptions-item label="发货人地址">{{this.waybillDetail.senderAddr}}</el-descriptions-item>
        <el-descriptions-item label="收获人名字">{{this.waybillDetail.receiverName}}</el-descriptions-item>
        <el-descriptions-item label="收获人电话">{{this.waybillDetail.receiverMobile}}</el-descriptions-item>
        <el-descriptions-item label="收获人地址">{{this.waybillDetail.receiverAddr}}</el-descriptions-item>
        <el-descriptions-item label="预计发货时间">{{this.waybillDetail.deliveryTime}}</el-descriptions-item>
            <el-descriptions-item label="里程">{{this.waybillDetail.distance}}</el-descriptions-item>
        <el-descriptions-item label="预计到达时间">{{this.waybillDetail.estimatedArriveTime}}</el-descriptions-item>
        <el-descriptions-item label="是否代收货款">
          <dict-tag :options="dict.type.accept_collect_payment_yes_no"
                    :value="waybillDetail.collectPayment" />
          <!-- {{this.waybillDetail.collectPayment}} -->
        </el-descriptions-item>
        <el-descriptions-item label="返款类型">
          <dict-tag :options="dict.type.accept_refund_type"
                    :value="waybillDetail.refundType" />
        </el-descriptions-item>
        <el-descriptions-item label="货款(元)">
          {{this.waybillDetail.payment}}
        </el-descriptions-item>
        <el-descriptions-item label="支付方式">
          <dict-tag :options="dict.type.accept_pay_type"
                    :value="waybillDetail.payType" />
        </el-descriptions-item>
        <el-descriptions-item label="是否需要搬运服务">
          <dict-tag :options="dict.type.accept_moving_service_yes_no"
                    :value="waybillDetail.movingService" />
        </el-descriptions-item>
        <el-descriptions-item label="减费(元)">{{this.waybillDetail.reduceFund}}</el-descriptions-item>
        <el-descriptions-item label="货物重量(kg)">{{this.waybillDetail.weight}}</el-descriptions-item>
        <el-descriptions-item label="货物体积(m³)">{{this.waybillDetail.volume}}</el-descriptions-item>
        <el-descriptions-item label="是否包含易碎品">
          <dict-tag :options="dict.type.accept_contains_fragile_goods_yes_no"
                    :value="waybillDetail.containsFragileGoods" />
        </el-descriptions-item>
        <el-descriptions-item label="货物价值(元)">{{this.waybillDetail.goodsValue}}</el-descriptions-item>
        <el-descriptions-item label="运费(元)">{{this.waybillDetail.freight}}</el-descriptions-item>
        <el-descriptions-item label="保险费(元)">{{this.waybillDetail.premium}}</el-descriptions-item>
        <el-descriptions-item label="搬运费(元)">{{this.waybillDetail.handlingFee}}</el-descriptions-item>
        <el-descriptions-item label="备注">{{this.waybillDetail.remarks}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <pagination v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList" />

    <!-- 添加或修改货运单对话框 -->
    <el-dialog :title="title"
               :visible.sync="open"
               width="1000px"
               append-to-body>
      <el-form ref="form"
               :model="form"
               :rules="rules"
               label-width="80px">
        <el-form-item label="发货人名字"
                      prop="senderName">
          <el-input v-model="form.senderName"
                    placeholder="请输入发货人名字" />
        </el-form-item>
        <el-form-item label="发货人手机"
                      prop="senderMobile">
          <el-input v-model="form.senderMobile"
                    placeholder="请输入发货人手机" />
        </el-form-item>
        <el-form-item label="收货人名字"
                      prop="receiverName">
          <el-input v-model="form.receiverName"
                    placeholder="请输入收货人名字" />
        </el-form-item>
        <el-form-item label="收货人手机"
                      prop="receiverMobile">
          <el-input v-model="form.receiverMobile"
                    placeholder="请输入收货人手机" />
        </el-form-item>
        <el-form-item label="发货人地址"
                      prop="senderAddr">
          <el-input v-model="form.senderAddr"
                    placeholder="请输入发货人地址"
                    ref="start" />
        </el-form-item>
        <el-form-item label="收货人地址"
                      prop="receiverAddr">
          <el-input v-model="form.receiverAddr"
                    placeholder="请输入收货人地址"
                    ref="end" />
        </el-form-item>

        <el-form-item label="路线生成">
          <el-button type="primary"
                     @click="confirm">确认</el-button>
        </el-form-item>

        <el-form-item label="路线预览">
          <baidu-map class="map"
                     :center="{lng: 116.404, lat: 39.915}"
                     :zoom="11">
            <bm-driving :start="start"
                        :end="end"
                        @searchcomplete="handleSearchComplete"
                        :panel="false"
                        @stop="mapReset"
                        :autoViewport="true"></bm-driving>
            <bml-lushu :path="path"
                       :icon="icon"
                       :play="play"
                       :rotation="true">
            </bml-lushu>
          </baidu-map>
        </el-form-item>
        <el-form-item label="里程"
                      prop="distance">
          <el-input v-model="form.distance"
                    placeholder="请输入里程"
                    />
        </el-form-item>
        <el-form-item label="预计发货时间"
                      prop="deliveryTime">
          <el-date-picker clearable
                          v-model="form.deliveryTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="请选择预计发货时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预计到货时间"
                      prop="estimatedArriveTime">
          <el-date-picker clearable
                          v-model="form.estimatedArriveTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="请选择预计到货时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否代收货款">
          <el-radio-group v-model="form.isNeedCollectPayment">
            <el-radio v-for="dict in dict.type.accept_collect_payment_yes_no"
                      :key="dict.value"
                      :label="parseInt(dict.value)">{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="返款类型">
          <el-radio-group v-model="form.refundType">
            <el-radio v-for="dict in dict.type.accept_refund_type"
                      v-if="form.isNeedCollectPayment==1"
                      :key="dict.value"
                      :label="parseInt(dict.value)">{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="返款金额"
                      prop="payment"
        v-if="form.isNeedCollectPayment==1">
          <el-input v-model="form.payment"
                    placeholder="请输入返款金额(元)" />
        </el-form-item>
        <el-form-item label="支付方式">
          <el-radio-group v-model="form.payType">
            <el-radio v-for="dict in dict.type.accept_pay_type"
                      :key="dict.value"
                      :label="parseInt(dict.value)">{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否需要搬运服务">
          <el-radio-group v-model="form.isNeedMovingService">
            <el-radio v-for="dict in dict.type.accept_moving_service_yes_no"
                      :key="dict.value"
                      :label="dict.value">{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="减费"
                      prop="reduceFund">
          <el-input v-model="form.reduceFund"
                    placeholder="请输入减费(元)" />
        </el-form-item>
        <el-form-item label="货物重量"
                      prop="goodsWeight">
          <el-input v-model="form.goodsWeight"
                    placeholder="请输入货物重量(kg)" />
        </el-form-item>
        <el-form-item label="货物体积"
                      prop="goodsVolume">
          <el-input v-model="form.goodsVolume"
                    placeholder="请输入货物体积(m³)" />
        </el-form-item>
        <el-form-item label="是否包含易碎品">
          <el-radio-group v-model="form.containsFragileGoods">
            <el-radio v-for="dict in dict.type.accept_contains_fragile_goods_yes_no"
                      :key="dict.value"
                      :label="parseInt(dict.value)">{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="货物价值"
                      prop="goodsValue">
          <el-input v-model="form.goodsValue"
                    placeholder="请输入货物价值(元)" />
        </el-form-item>
        <el-form-item label="备注信息"
                      prop="remarks">
          <el-input v-model="form.remarks"
                    placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listWaybill,
  getWaybill,
  delWaybill,
  addWaybill,
  updateWaybill,
} from '@/api/accept/waybill'
import { BmlLushu } from 'vue-baidu-map'
export default {
  components: { BmlLushu },
  name: 'Waybill',
  dicts: [
    'accept_moving_service_yes_no',
    'accept_refund_type',
    'accept_pay_type',
    'accept_waybill_status',
    'accept_collect_payment_yes_no',
    'accept_contains_fragile_goods_yes_no',
  ],
  data() {
    return {
      timeRange:["",""],
      descriptionsShow: false,
      //运单详情:
      waybillDetail: {
        num: '',
        senderName: '',
        senderMobile: '',
        senderAddr: '',
        receiverName: '',
        receiverMobile: '',
        receiverAddr: '',
        deliveryTime: '',
        collectPayment: '',
        payment:'',
        refundType: '',
        payType: '',
        movingService: '',
        reduceFund: '',
        weight: '',
        volume: '',
        containsFragileGoods: '',
        goodsValue: '',
        //运费
        freight: '',
        //保险费
        premium: '',
        //搬运费
        handlingFee: '',
        //里程
        distance: '',
        //到达时间
        estimatedArriveTime: '',
        remarks: '',
      },
      play: false,
      path: [],
      icon: {
        url: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
        size: {
          width: 52,
          height: 26,
        },
        opts: {
          anchor: {
            width: 27,
            height: 13,
          },
        },
      },
      start: '',
      end: '',
      distance: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 货运单表格数据
      waybillList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        receiverName: null,
        senderName: null,
        waybillNumber: null,
        minTime: null,
        maxTime: null,
        waybillStatus: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //显示详情:
    showWaybillDetail(data) {
      this.title = '货运单详情'
      this.descriptionsShow = true
      console.log(data)
      this.waybillDetail.num = data.waybillNumber
      this.waybillDetail.senderName = data.senderName
      this.waybillDetail.senderMobile = data.senderMobile
      this.waybillDetail.senderAddr = data.senderAddr
      this.waybillDetail.receiverName = data.receiverName
      this.waybillDetail.receiverMobile = data.receiverMobile
      this.waybillDetail.receiverAddr = data.receiverAddr
      this.waybillDetail.deliveryTime = data.deliveryTime
      this.waybillDetail.collectPayment = data.isNeedCollectPayment
      this.waybillDetail.refundType = data.refundType
      this.waybillDetail.payment = data.payment/100
      this.waybillDetail.payType = data.payType
      this.waybillDetail.movingService = data.isNeedMovingService
      this.waybillDetail.reduceFund = data.reduceFund/100
      this.waybillDetail.weight = data.goodsWeight/1000
      this.waybillDetail.volume = data.goodsVolume/1000
      this.waybillDetail.containsFragileGoods = data.containsFragileGoods
      this.waybillDetail.goodsValue = data.goodsValue/100
      this.waybillDetail.freight = data.freight/100
      this.waybillDetail.premium =data.premium/100
      this.waybillDetail.handlingFee =data.handlingFee/100
      this.waybillDetail.distance = data.distance/1000
      this.waybillDetail.estimatedArriveTime = data.estimatedArriveTime
      this.waybillDetail.remarks = data.remarks
    },
    waybillDetailReset() {
      this.waybillDetail = null
    },
    mapReset() {
      this.play = false
    },
    handleSearchComplete(res) {
      this.path = res.getPlan(0).getRoute(0).getPath()
    },
    /**生成地址路线*/
    confirm() {
      this.start = this.$refs.start.value
      this.end = this.$refs.end.value
      if(this.start==null||this.end==null||this.start.length==0||this.end.length==0){
        this.$alert('地址不能为空', '警告', {
          confirmButtonText: '确定',
        });
        return
      }
      this.play = true
      //

    },
    renderTime(date) {
      var dates = new Date(date).toJSON()
      return new Date(+new Date(dates) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
    },

    /** 查询货运单列表 */
    getList() {
      this.loading = true
      listWaybill(this.queryParams).then((response) => {
        this.waybillList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        waybillId: null,
        waybillNumber: null,
        senderId: null,
        senderName: null,
        senderMobile: null,
        senderAddr: null,
        receiverId: null,
        receiverName: null,
        receiverMobile: null,
        receiverAddr: null,
        deliveryTime: null,
        isNeedCollectPayment: 0,
        refundType: 0,
        payType: 0,
        isNeedMovingService: '0',
        reduceFund: null,
        goodsWeight: null,
        goodsVolume: null,
        containsFragileGoods: 0,
        goodsValue: null,
        waybillStatus: null,
        remarks: null,
        deleted: null,
        createdBy: null,
        createdTime: null,
        updatedBy: null,
        updatedTime: null,
      }

      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      console.log("时间:,",this.timeRange[0],this.timeRange[1])
      console.log("时间戳",this.timeRange)
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.waybillId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加货运单'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const waybillId = row.waybillId || this.ids
      getWaybill(waybillId).then((response) => {
        this.form = response.data
        this.open = true
        this.title = '修改货运单'
      })
    },
    /** 提交按钮 */
    submitForm() {
      // this.form.senderAddr=this.senderProvinceCityArea+this.senderDetailAddr;
      // this.form.receiverAddr=this.receiverProvinceCityArea+this.receiverDetailAddr;
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.waybillId != null) {
            updateWaybill(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addWaybill(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
      console.log(this.form)
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const waybillIds = row.waybillId || this.ids
      this.$modal
        .confirm('是否确认删除货运单编号为"' + waybillIds + '"的数据项？')
        .then(function () {
          return delWaybill(waybillIds)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'accept/waybill/export',
        {
          ...this.queryParams,
        },
        `waybill_${new Date().getTime()}.xlsx`
      )
    },
  },
}
</script>
<style>
.map {
  height: 400px;
  width: 100%;
}
</style>
